<!-- 主管理页 -->
<template>
  <div class="container-body organization-manage">
    <div class="page-containerstwo">
      <div class="newleft" :style="{ width: isExpanded ? `${maxWidth}px` : '0px' }">
        <div class="leftview" v-show="isExpanded">
          <div class="zhanitem">
            <div class="pone">
              <img src="../../assets/img/icon_ps.png" alt="" class="icon_ps"/>
              <span class="painame">{{ $t('message.AILive') }}</span>
              <div class="rpai">
                <img src="../../assets/img/icon_px.png" alt="" class="icon_px"/>
                <img src="../../assets/img/icon_tj.png" alt="" class="icon_px" @click="getaddziyuan(1)"/>
                <!-- <img src="../../assets/img/icon_zk_s.png" alt="" class="icon_px"> -->
              </div>
            </div>
            <div class="pzhan" :class="popitem.ID == item.ID ? 'isclass' : ''" v-for="(item, index) in LLlist"
                 :key="index" @click.stop="getpcvideo(item, 1)">
              <span class="dian"></span>
              <span class="zhanname txt">{{ item.name }}</span>
              <img src="../../assets/img/icon_gd.png" alt="" class="icon_gd" @click.stop="getgengxin(item, 1)"/>
            </div>
          </div>
          <div class="zhanitem">
            <div class="pone">
              <img src="../../assets/img/icon_wdzy.png" alt="" class="icon_ps"/>
              <span class="painame">{{ $t('message.materialManagement') }}</span>
              <div class="rpai">
                <img src="../../assets/img/icon_px.png" alt="" class="icon_px"/>
                <img src="../../assets/img/icon_tj.png" alt="" class="icon_px" @click="getaddziyuan(2)"/>
              </div>
            </div>
            <div class="pzhan" :class="wenitem.ID == item.ID ? 'isclass' : ''" v-for="(item, index) in ZYlist"
                 :key="index" @click.stop="getpcvideo(item, 3)">
              <span class="dian"></span>
              <span class="zhanname txt">{{ item.name }}</span>
              <img src="../../assets/img/icon_gd.png" alt="" class="icon_gd" @click.stop="getgengxin(item, 2)"/>
            </div>
          </div>

        </div>
      </div>

      <div class="rightview center-row" v-if="islei == 1">
        <div class="ritems">
          <div class="rnav">
            <img src="../../assets/img/img_pt.png" alt="" class="img_pt"/>
            <div class="navbot">
              <div class="chuanbtn" @click="getaddziyuan(1)">{{ $t('message.createLive') }}</div>
            </div>
          </div>
          <div class="rnav">
            <img src="../../assets/img/img_pttwo.png" alt="" class="img_pt"/>
            <div class="navbot">
              <div class="chuanbtn" @click="getaddziyuan(2)">{{ $t('message.createMaterialManagement') }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="rightview center-col" v-if="islei == 3" @click="righthandleClick">
        <div class="xmwj">
          <span class="xname">{{ $t('message.projectFile') }}</span>
        </div>
        <div class="xmwj" style="height: 48px;">
          <div>
            <span class="xname" style="cursor: pointer;" v-for="(item, index) in headlist" :key="index"
                  @click="getheadyun(item, index)">{{ item.fileName + ' >' }}</span>
          </div>
          <div class="xmright">
            <!-- <img src="../../assets/img/icon_px.png" alt="" class="icon_yq">
						<img src="../../assets/img/icon_lb.png" alt="" class="icon_yq"> -->
            <div class="schaun" @click="getaddwenjian">{{ $t('message.updateAndAdd') }}</div>
          </div>
        </div>
        <div class="wenview">
          <div class="wenitems">
            <div class="wenhead" v-if="wenjianlist != ''">
              <span class="wenname">文件夹</span>
              <img src="../../assets/img/icon_zk_s.png" alt="" class="sjiao"/>
            </div>
            <div class="wenjjia">
              <div class="wens exclude-item" v-for="(item, index) in wenjianlist" :key="index"
                   @click.stop="getwenitem(item)">
                <img src="../../assets/img/img_bj.png" alt="" class="img_bj"/>
                <div class="itemswj">
                  <div class="wjhead">
                    <div class="wjleft" v-if="item.fileType == 'F'">
                      <img v-if="getnodetu(item)" style="height: 44px;margin-top: 7px;border-radius: 5px;" :src="item.filePath + '?x-oss-process=video/snapshot,t_1,m_fast'"
                           alt="" class="img_wjs"/>
                      <img v-else :src="item.filePath" alt="" style="border-radius: 5px;object-fit: cover;"
                           class="img_wjs"/>
                    </div>
                    <div class="wjleft" v-else>
                      <img src="../../assets/img/img_wjs.png" alt="" class="img_wjs"/>
                    </div>
                    <img src="../../assets/img/img_sc.png" alt="" class="img_sc"/>
                  </div>
                  <div class="wenbot">
                    <div class="botleft">
                      <span class="botname">{{ item.fileName }}</span>
                      <span class="bottime">{{ item.createTime }}</span>
                    </div>

                    <img src="../../assets/img/icon_gd.png" slot="reference" @click.stop="handleClickelpop(index)"
                         alt="" class="icon_gds"/>
                    <el-popover v-for="(i, ind) in wenjianlist" :key="`popover-${ind}`" :ref="`popover-${ind}`"
                                placement="bottom" width="200" trigger="click" v-slot:default="scope">
                      <div class="chaview">
                        <div class="elitem" @click.stop="getgengwen(i, ind)">{{ $t('message.Upload') }}</div>
                        <div class="elitem" v-if="i.fileType == 'F'" @click.stop="getdown(i, ind)">
                          {{ $t('message.proviewAndDownload') }}
                        </div>
                        <div class="elitem" v-if="isShowDelete" @click.stop="getdelwen(i, ind)">{{
                            $t('message.delete')
                          }}
                        </div>
                        <div class="elitem" @click.stop="createShaer2(i)">{{ $t('message.createShare') }}</div>
                      </div>
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="rightview center-col" v-if="islei == 6">
        <div class="xmwj">
          <span class="xname">{{ $t('message.liveStreamingSlicing') }}</span>
          <span class="shu"></span>
          <span class="hui"></span>
        </div>
        <span class="tiji">{{ $t('message.projectStatistics') }}</span>
        <div class="xmwj" style="height: 48px;">
          <div class="chuview">
            <span class="cbiaoti">{{ $t('message.creationTime') }}:</span>
            <span class="xname">{{ popitem.createTime }}</span>
          </div>

          <div class="chuview">
            <span class="cbiaoti">{{ $t('message.storageSpace') }}:</span>
            <span class="xname">{{ popitem.size }}MB</span>
          </div>
          <div class="chuview">
            <span class="cbiaoti">{{ $t('message.numberOfFiles') }}:</span>
            <span class="xname">{{ popitem.qty }}{{ $t('message.individual') }}</span>
          </div>
          <div class="chaungjian">
            <el-button size="mini" @click="cjiwei('add')">{{ $t('message.createLiveStreamingSlices') }}</el-button>

            <el-button size="mini" type="primary" @click="createShare">{{ $t('message.createShare') }}</el-button>
          </div>
        </div>
        <div class="wenviewtwo">
          <div class="jiview">
            <div class="jiitems" v-for="(item, index) in cjwlist" :key="index">
              <div class="jihead">
                <span class="jbt txt">{{ item.name }}</span>
                <span class="jbtwjian"></span>
                <i @click="deleteSlice(item)" v-if="isShowDelete" style="color:#fff;margin:0 10px;font-size:20px"
                   class="el-icon-delete"></i>
              </div>
              <div class="jinav">
                <div class="jinavleft">
                  <img :src="item.headImg ? item.headImg : require('../../assets/img/img_pt.png')" alt=""
                       class="wentu"/>
                </div>
                <div class="jinavright">
                  <el-button style="margin:10px 5px" size="small" type="primary" @click="cjiweiedit(item, 'edit')">
                    {{ $t('message.lang54') }}
                  </el-button>

                  <el-button style="margin:10px 5px" size="small" @click="getjipei(item, 'add')">
                    {{ $t('message.sliceConfiguration') }}
                  </el-button>
                  <el-button style="margin:10px 5px" size="small" type="primary" @click="getjiankan(item)">
                    {{ $t('message.MonitorReplay') }}
                  </el-button>
                  <el-button style="margin:10px 5px" size="small" type="primary" v-if="item.cutStatus == 1"
                             @click="getqiepian(item)">{{ $t('message.terminateSlicing') }}
                  </el-button>
                  <el-button style="margin:10px 5px" size="small" type="primary" v-else @click="getqiepian(item)">
                    {{ $t('message.startSlicing') }}
                  </el-button>
                  <el-button style="margin:10px 5px" size="small" type="primary" v-if="item.recordingStatus == 1"
                             @click="getRecording(item)">
                    {{ $t('message.terminateRecording') }}
                  </el-button>
                  <el-button style="margin:10px 5px" size="small" type="primary" v-else @click="getRecording(item)">
                    {{ $t('message.startRecordingAndPlayback') }}
                  </el-button>
                  <el-button style="margin:10px 5px" size="mini" type="primary" @click="createShare(item)">
                    {{ $t('message.createShare') }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增拍摄项目 -->
    <el-dialog :title="zitype == 'add' ? $t('message.create') : $t('message.Upload')"
               :visible.sync="paishedialogVisible" width="40%" @close="handleClose(1)">
      <div class="popcj">
        <!-- show-word-limit maxlength="20" -->
        <el-input v-model="ziform.name" :placeholder="请填写名称"></el-input>
      </div>
      <div class="popcj">
        <span class="fang">{{ $t('message.lang57') }}</span>
        <el-tooltip class="item" effect="dark" :content="$t('message.promptText')" placement="right">
          <i class="el-icon-question"></i>
        </el-tooltip>
        <div class="popright">
          <el-upload class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl2" :src="imageUrl2" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <div class="popcj">
        <span class="fang">{{ $t('message.antiScreenRecording') }}</span>
        <el-tooltip class="item" effect="dark" :content="$t('message.promptText')" placement="right">
          <i class="el-icon-question"></i>
        </el-tooltip>
        <div class="popright">
          <el-switch v-model="ziform.isScreen" active-color="#0199E8"></el-switch>
        </div>
      </div>
      <div class="popcj">
        <span class="fang">{{ $t('message.joiningTheProjectRequiresReview') }}</span>
        <el-tooltip class="item" effect="dark" :content="$t('message.promptText')" placement="right">
          <i class="el-icon-question"></i>
        </el-tooltip>
        <div class="popright">
          <el-switch active-color="#0199E8"></el-switch>
        </div>
      </div>
      <div class="popcj">
        <span class="fang">{{ $t('message.identityAndPermissionSettings') }}</span>
        <el-tooltip class="item" effect="dark" :content="$t('message.promptText')" placement="right">
          <i class="el-icon-question"></i>
        </el-tooltip>
        <div class="popright">
          <el-switch active-color="#0199E8"></el-switch>
        </div>
      </div>

      <div class="popcj">
        <span class="fang">{{ $t('message.viewReplayFiles') }}</span>
        <el-tooltip class="item" effect="dark" :content="$t('message.promptText')" placement="right">
          <i class="el-icon-question"></i>
        </el-tooltip>
        <div class="popright">
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="$t('message.manager')" disabled></el-checkbox>
            <el-checkbox :label="$t('message.Producer')"></el-checkbox>
            <el-checkbox :label="$t('message.reviewer')"></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <span class="huishe">{{ $t('message.restoreIdentityPermissionsToDefaultSettings') }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paishedialogVisible = false">{{ $t('message.Cancel') }}</el-button>
        <el-button type="primary" @click="chuangxm">{{
            zitype == 'add' ? $t('message.create') : $t('message.Upload')
          }}</el-button>
        <el-button v-if="zitype !== 'add' && isShowDelete" type="danger"
                   @click="deleteProject">{{ $t('message.Cancel2') }}</el-button>
      </span>
    </el-dialog>

    <!-- 创建机位 -->
    <el-dialog :title="cjwtype == 'add' ? $t('message.createSlice') : $t('message.updateSlice')"
               :visible.sync="jiweidialogVisible" width="40%" @close="handleClose(2)">
      <div class="popcj">
        <el-input v-model="jiwei.name" :placeholder="$t('message.pleaseFillInTheSliceName')"></el-input>
      </div>
      <div class="popcj">
        <span class="fang">{{ $t('message.lang57') }}</span>
        <el-tooltip class="item" effect="dark" :content="$t('message.promptText')" placement="right">
          <i class="el-icon-question"></i>
        </el-tooltip>
        <div class="popright">
          <el-upload class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl2" :src="imageUrl2" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <span class="chams"></span>
      <span class="chamiao"></span>
      <div class="qitem">
        <div class="quan"></div>
        <span class="quanmiao">{{ $t('message.lang1') }}</span>
        <el-tooltip class="pyi" effect="dark" :content="$t('message.promptText')" placement="right">
          <i class="el-icon-question"></i>
        </el-tooltip>
      </div>
      <div class="qitem">
        <div class="quan"></div>
        <span class="quanmiao">{{ $t('message.lang2') }}</span>
        <el-tooltip class="pyi" effect="dark" :content="$t('message.promptText')" placement="right">
          <i class="el-icon-question"></i>
        </el-tooltip>
      </div>
      <div class="qitem">
        <div class="quan"></div>
        <span class="quanmiao">{{ $t('message.lang3') }}</span>
        <el-tooltip class="pyi" effect="dark" :content="$t('message.promptText')" placement="right">
          <i class="el-icon-question"></i>
        </el-tooltip>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="jiweidialogVisible = false">{{ $t('message.Cancel') }}</el-button>
        <el-button type="primary" @click="getjibtn">{{
            cjwtype == 'add' ? $t('message.create') : $t('message.Upload')
          }}</el-button>
      </span>
    </el-dialog>

    <!-- 视频源配置 -->
    <el-dialog :title="$t('message.lang5')" :visible.sync="spydialogVisible" width="60%" @close="handleClose(3)">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('message.lang6')" name="first"></el-tab-pane>
        <el-tab-pane :label="$t('message.lang7')" name="second"></el-tab-pane>
      </el-tabs>
      <div class="sp" v-if="activeName == 'first'">
        <div class="popcj">
          <el-input v-model="spyfrom.rtmpUrl" :placeholder="$t('message.lang8')"></el-input>
        </div>
        <div class="popcj">
          <span class="fang">默认切片时间</span>
          <div class="popright" style="align-items: center;">
            {{ $t('message.lang9') }}
            <el-input v-model="spyfrom.cutTimes" type="number" style="width: 100px;margin: 0 10px;" show-word-limit
                      :placeholder="$t('message.lang8')"></el-input>
            {{ $t('message.lang10') }}
          </div>
        </div>
      </div>
      <div class="sp" v-if="activeName == 'second'">
        <div class="chuan">
          <div class="chuanleft">
            <el-upload class="upload-demo" drag ref="upload" :action="uploadImgUrl" :show-file-list="false"
                       :before-upload="beforeUpload" multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text" v-if="!selectedFile">
                {{ $t('message.lang11') }}
                <em style="font-size: 14px;display: inline-block;margin: 0 3px;">{{ $t('message.lang12') }}</em>
                {{ $t('message.lang13') }}
                <em>{{ $t('message.lang14') }}</em>
              </div>
              <div class="el-upload__text" v-if="selectedFile">
                <em style="font-size: 14px;display: inline-block;margin: 0 3px;">{{ $t('message.lang15') }}</em>
                {{ $t('message.lang16') }}
              </div>
              <div class="el-upload__tip" slot="tip">
                {{ $t('message.lang17') }}
                <span style="color: red;" v-if="sucailist != ''">{{ $t('message.lang18') }}{{
                    sucailist.length
                  }}个</span>
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="spydialogVisible = false">{{ $t('message.cancel') }}</el-button>
        <el-button type="primary" @click="handleUpload">{{ $t('message.confirm') }}</el-button>
      </span>
    </el-dialog>

    <!-- 云盘创建目录 -->
    <el-dialog :title="ypantype == 'add' ? $t('message.lang19') : $t('message.lang20')"
               :visible.sync="yunpandialogVisible" width="40%" @close="handleClose(4)">
      <el-tabs v-model="yunpanName" v-if="ypantype == 'add'" @tab-click="handleClickyunpan">
        <el-tab-pane :label="$t('message.lang21')" name="first"></el-tab-pane>
        <el-tab-pane :label="$t('message.lang22')" name="second"></el-tab-pane>
      </el-tabs>
      <div class="popcj" v-if="yunpanName == 'first'">
        <!-- show-word-limit maxlength="20" -->
        <el-input v-model="yunpanform.fileName" :placeholder="$t('message.lang23')"></el-input>
      </div>
      <div class="sp" v-if="yunpanName == 'second' && ypantype != 'edit'">
        <div class="chuan">

          <div class="chuanleft">
            <el-upload class="upload-demo" drag ref="uploadwen" :action="uploadImgUrlwen" :file-list="fileListwen"
                       :before-upload="beforeUploadwen" :on-change="handleFileChange" multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text" v-if="!selectedFilewen">
                {{ $t('message.lang11') }}
                <em style="font-size: 14px;display: inline-block;margin: 0 3px;">{{ $t('message.lang12') }}</em>
                {{ $t('message.lang13') }}
                <em>{{ $t('message.lang14') }}</em>
              </div>
              <div class="el-upload__text" v-if="selectedFilewen">
                <em style="font-size: 14px;display: inline-block;margin: 0 3px;">{{ $t('message.lang15') }}</em>
                {{ $t('message.lang16') }}
              </div>
              <div class="el-upload__tip" slot="tip">
                {{ $t('message.lang17') }}
                <span style="color: red;" v-if="xmwenlist != ''">{{ $t('message.lang18') }}{{
                    xmwenlist.length
                  }}个</span>
              </div>
            </el-upload>
          </div>
        </div>
        <!-- <div class="popcj">
						<span class="fang">备注</span>
						<div class="popright" style="align-items: center;">
							<el-input v-model="name" type="textarea" style="width: 200px;margin: 0 10px;" show-word-limit  :placeholder="$t('message.lang8')"></el-input>
						</div>
					</div> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="yunpandialogVisible = false">{{ $t('message.cancel') }}</el-button>
        <el-button type="primary" @click="chuangyunpan">{{
            yunpanName == 'second' ? $t('message.lang24') : ypantype == 'add' ? $t('message.create') : $t('message.Upload')
          }}</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="tudialogVisible" width="80%" title="图片预览" custom-class="image-preview-dialog">
      <el-image :src="imageUrl" style="width: 100%; max-height: auto" :preview-src-list="[imageUrl]"/>
      <!-- <img :src="imageUrl" style="width: 100%; height: auto" /> -->
    </el-dialog>
  </div>
</template>

<script>
import {SystemMangeAPI} from '@/api/SystemMange';
import {Loading} from 'element-ui';
import message from '../../i18n/en';

export default {
  name: 'OperationLog',
  components: {},
  data() {
    return {
      isShowDelete: false,
      treeTitle: '组织架构',
      isshuju: false,
      paishedialogVisible: false, //拍摄项目
      name: '',
      value2: false,
      checkList: [this.$t('message.Producer')],
      jiweidialogVisible: false,
      spydialogVisible: false, //视频源配置
      activeName: 'first',
      islei: 1, //我的拍摄 2参与的拍摄 3我的项目 4参与的项目 6展示机位
      isleftzhan: false,
      isExpanded: true, // 控制是否展开的标志
      maxWidth: 300, // 最大宽度，例如600px
      isExpandedRight: false,
      fileList: [],
      userData: {name: '张三', age: 30}, // 示例数据
      // items: [
      // 	{ name: 'Item 1', content: '这是内容1' },
      // 	{ name: 'Item 2', content: '这是内容2' },
      // 	// 更多项...
      // ],
      items: [{name: '项目1'}, {name: '项目2'}, {name: '项目3'}],
      popovers: [false, false, false],
      activeIndex: null, // 当前激活的 popover 索引
      zipop: 1, //1拍摄 2项目
      zitype: 'add', //新增
      ziform: {
        name: '', //名称
        type: 'LL', //项目类型(LL:拉流项目,ZY:资源项目)
        isScreen: false, //Y  N
        // ID:''
      },
      LLlist: [], //拉流数据
      ZYlist: [], //资源数据
      CYLLlist: [], //参与拉流数据
      CYZYlist: [], //参与资源数据
      popid: '',
      popitem: {}, //点击拍拍摄数据获取

      cjwtype: 'add', //资源类型 add edit
      cjwlist: [],
      jiwei: {
        name: '',
      },
      jipopid: '',

      spyitem: {},
      spytype: 'add',
      resourceId: '10', //资源组id
      spyfrom: {
        chrResourceId: '', //资源组id
        type: 'RTMP',
        rtmpUrl: '',
        cutTimes: 60,
      },
      uploadImgUrl: this.$api + '/resourceItem/UploadFiles', // 上传的图片服务器地址
      uploadImgUrlwen: this.$api + '/yunDisk/Upload', // 上传的图片服务器地址
      headers: {
        token: localStorage.getItem('token'),
        'Content-Type': 'form-data',
      },
      uploaddata: {
        resourceId: '12',
      },
      selectedFile: null,
      selectedFilewen: null,
      sucailist: [],

      wenitem: {}, //点击项目获取数据
      parentId: 0,
      wenjianlist: [], //文件数据
      yunpandialogVisible: false, //云盘创建
      ypantype: 'add',
      yunpanform: {
        fileName: '', //文件名称
        projectId: '', //项目id
        parentId: 0, //夫亲目录id
        fileType: 'D',
      },
      headlist: [
        {
          fileName: '我的资源',
          parentId: 0,
          projectId: 0,
          ID: 0,
        },
      ],
      ypanpopid: '',
      yunpanName: 'first',
      xmwenlist: [],
      tudialogVisible: false,
      imageUrl: '',
      imageUrl2: '',
    };
  },
  watch: {},
  computed: {
    containerStyle() {
      return {
        width: this.isExpanded ? `${this.maxWidth}px` : '0px', // 根据isExpanded的值动态设置宽度
      };
    },
  },
  mounted() {
    this.getproject(); //我的项目
    if (localStorage.getItem('islei')) {
      this.islei = localStorage.getItem('islei');
      // console.log(JSON.parse(localStorage.getItem('popitem')))
      if (this.islei == 6) {
        if (localStorage.getItem('popitem')) {
          this.popitem = JSON.parse(localStorage.getItem('popitem'));
          this.getpaishelist(); //获取项目所有资源
        }
      }
      if (this.islei == 3) {
        if (localStorage.getItem('yunpanform')) {
          this.yunpanform = JSON.parse(localStorage.getItem('yunpanform'));
        }
        if (localStorage.getItem('wenitem')) {
          this.wenitem = JSON.parse(localStorage.getItem('wenitem'));
          this.yunpanform.projectId = this.wenitem.ID;
          this.getwenlist(); //获取项目所有资源
        }
        if (localStorage.getItem('headlist')) {
          this.headlist = JSON.parse(localStorage.getItem('headlist'));
        }
      }
    }
  },
  onHide() {
  },
  beforeDestroy() {
  },
  beforeUnmount() {
  },
  methods: {
    handleAvatarSuccess(res, file) {
    },
    beforeAvatarUpload(file) {
      this.imageUrl2 = ""
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      const formData = new FormData();
      formData.append('file', file);
      // 上传文件
      SystemMangeAPI.uploadFile(formData).then(({oss_url}) => {
        this.imageUrl2 = oss_url.ossUrl;
        console.log(this.imageUrl2);
      });
      return isJPG && isLt2M;
    },
    // 删除项目
    deleteProject() {
      console.log(this.popid)
      const {id} = JSON.parse(localStorage.getItem('user'));
      SystemMangeAPI.deleteProjectAPI({userid: id, id: this.popid}).then(res => {
        if (res.code === 0) {
          this.paishedialogVisible = false;
          this.$message({
            type: 'success',
            message: this.$t('message.deleteSucess'),
          });

          this.getclear(1);
          this.getproject(); //我的项目
        }
      });
    },
    // 删除切片
    deleteSlice(item) {
      // 确认删除
      this.$confirm(this.$t('message.noDelete2'), this.$t('message.prompt'), {
        confirmButtonText: this.$t('message.confirm'),
        cancelButtonText: this.$t('message.cancel'),
        type: 'warning',
      }).then(() => {
        SystemMangeAPI.deleteResource(item.ID).then(({code}) => {
          if (code === 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.deleteSucess'),
            });

            this.getclear(2);
            this.getpaishelist(); //获取项目所有资源
          }
        });
      });
    },
    copyToClipboard(text) {
      navigator.clipboard
          .writeText(text)
          .then(() => {
            console.log('内容已复制:', text);
          })
          .catch(err => {
            console.error('复制失败:', err);
          });
    },
    // 分享
    createShare(item) {
      const data = {
        chrProjectId: this.popitem.ID,
        chrResourceId: item ? item.ID : null,
      };
      SystemMangeAPI.CreateShareAPI(data).then(({code, data}) => {
        if (code == 0) {
          this.$alert(
              `
            <div stytle="font-size:20px">
            链接: ${data.url}<br/>
            密码: ${data.password}<br/>
            有效期: 永久有效<br/>
            </div>
          `,
              '分享成功',
              {
                confirmButtonText: this.$t('message.lang55'),
                dangerouslyUseHTMLString: true,
                callback: () => {
                  this.copyToClipboard(`链接: ${data.url}\n密码: ${data.password}\n有效期: 永久有效\n`);
                },
              }
          );
        }
      });
    },
    createShaer2(item) {
      const data = {
        chrProjectId: item.projectId,
        sysDiskFileId: item ? item.ID : null,
      };
      SystemMangeAPI.CreateShareAPI(data).then(({code, data}) => {
        if (code == 0) {
          this.$alert(
              `
            <div stytle="font-size:20px">
            链接: ${data.url}<br/>
            密码: ${data.password}<br/>
            有效期: 永久有效<br/>
            </div>
          `,
              '分享成功',
              {
                confirmButtonText: this.$t('message.lang55'),
                dangerouslyUseHTMLString: true,
                callback: () => {
                  this.copyToClipboard(`链接: ${data.url}\n密码: ${data.password}\n有效期: 永久有效\n`);
                },
              }
          );
        }
      });
    },
    getproject() {
      SystemMangeAPI.ListMyProjects().then(res => {
        if (res.code == 0) {
          let parms = res.data;
          let ll = [];
          let tl = [];
          for (let i in parms) {
            if (parms[i].type == 'LL') {
              ll.push(parms[i]);
            } else if (parms[i].type == 'ZY') {
              tl.push(parms[i]);
            }
          }
          this.LLlist = ll;
          this.ZYlist = tl;
        }
      });
    },
    chuangxm() {
      if (this.zitype == 'add') {
        //新增项目
        if (!this.ziform.name) {
          this.$message({
            type: 'error',
            message: this.$t('message.lang25'),
          });
          return;
        }
        let parms = Object.assign({}, this.ziform);
        parms.type = this.zipop == 1 ? 'LL' : 'ZY';
        parms.isScreen = this.ziform.isScreen ? 'Y' : 'N';
        parms.headImg = this.imageUrl2;
        SystemMangeAPI.CreateProject(parms).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.lang26'),
            });
            this.getclear(1);
            this.getproject(); //我的项目
          }
        });
      } else if (this.zitype == 'edit') {
        //编辑
        if (!this.ziform.name) {
          this.$message({
            type: 'error',
            message: this.$t('message.lang25'),
          });
          return;
        }
        let parms = Object.assign({}, this.ziform);
        parms.type = this.zipop == 1 ? 'LL' : 'ZY';
        parms.IS_SCREEN = this.ziform.isScreen ? 'Y' : 'N';
        parms.ID = this.popid;
        parms.HEAD_IMG = this.imageUrl2;
        delete parms.isScreen;
        SystemMangeAPI.UpdateProject(parms).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.lang26'),
            });
            this.getclear(1);
            this.getproject(); //我的项目
          }
        });
      }
    },
    getclear(e) {
      if (e == 1) {
        this.paishedialogVisible = false;
        this.ziform = {
          name: '', //名称
          type: 'LL', //项目类型(LL:拉流项目,ZY:资源项目)
          isScreen: false, //Y  N
        };
      } else if (e == 2) {
        //拍摄
        this.jiweidialogVisible = false;
        this.jiwei = {
          name: '', //名称
        };
      } else if (e == 3) {
        //拍摄
        this.spydialogVisible = false;
        this.spyfrom = {
          chrResourceId: '', //资源组id
          type: 'RTMP',
          rtmpUrl: '',
          cutTimes: 60,
        };
      } else if (e == 4) {
        //云盘
        this.yunpandialogVisible = false;
        this.yunpanform = {
          fileName: '', //文件名称
          projectId: '', //项目id
          parentId: '', //夫亲目录id
          fileType: 'D',
        };
      }
    },
    handleClose(e) {
      if (e == 1) {
        this.paishedialogVisible = false;
      } else if (e == 2) {
        this.jiweidialogVisible = false;
      } else if (e == 3) {
        this.spydialogVisible = false;
      } else if (e == 4) {
        this.yunpandialogVisible = false;
      }
    },
    handleClick(tab, event) {
    },
    handleClickyunpan(tab, event) {
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded; // 切换展开状态
    },
    toggleExpandRight() {
      this.isExpandedRight = !this.isExpandedRight; // 切换展开状态
    },
    showPopover(data) {
      // 定义一个方法传递数据给弹窗内容
      this.$refs.popover.updatePopper(); // 确保弹窗内容更新，如果使用了v-slot:default接收数据的话，可能需要调用此方法或类似方法来触发更新。注意：Element UI的某些版本可能需要手动触发更新。具体方法可能需要根据Element UI的版本调整。例如，在某些情况下，你可能需要使用`this.$nextTick()`来确保DOM更新完成。
      // 或者在某些情况下，你可能需要手动触发更新：this.$refs.popover.doSomething(); // 根据实际情况调整方法名。例如：this.$refs.popover.$forceUpdate(); 或者其他适合的方法。具体取决于你的Element UI版本和实现细节。通常，使用`this.$nextTick()`是最简单的方法来确保DOM更新完成。例如：this.$nextTick(() => { /* 你的代码 */ });
    },
    handleClickelpop(index) {
      if (this.activeIndex === index) {
        this.$refs[`popover-${index}`][index].doClose(); // 关闭当前激活的 popover
        this.activeIndex = null; // 重置激活索引
      } else {
        this.activeIndex = index; // 设置当前激活的 popover 索引
        let parms = this.wenjianlist;
        for (let i in parms) {
          this.$refs[`popover-${i}`][i].doClose(); // 关闭当前激活的 popover
        }
        this.$refs[`popover-${index}`][index].doShow(); // 打开新的 popover
      }
    },
    righthandleClick() {
      //点击页面元素 关闭
      if (!event.target.closest('.el-popover') && !event.target.closest('.icon_gds')) {
        // 执行你的逻辑，例如打开一个对话框或者改变状态等
        console.log('页面被点击');
        let parms = this.wenjianlist;
        for (let i in parms) {
          this.$refs[`popover-${i}`][i].doClose(); // 关闭当前激活的 popover
        }
      }
    },
    getpcvideo(item, type) {
      if (type == 1) {
        //拍摄
        this.popitem = item;
        localStorage.setItem('popitem', JSON.stringify(this.popitem));
        this.isShowDelete = this.popitem.projectUser.isOwner == 'Y' ? true : false;
        this.getpaishelist(); //获取项目所有资源

        this.wenitem = {};
        localStorage.setItem('wenitem', null);
        this.getlei(6);
      } else if (type == 3) {
        //项目
        this.popitem = {};
        localStorage.setItem('popitem', null);

        this.wenitem = item;
        this.parentId = 0;
        this.yunpanform.projectId = this.wenitem.ID;
        this.yunpanform.parentId = 0; //每次点击左侧都默认初始值
        this.getclearhead(); //清空顶部 和 中间数据缓存
        localStorage.setItem('wenitem', JSON.stringify(this.wenitem));
        this.isShowDelete = this.wenitem.projectUser.isOwner == 'Y' ? true : false;
        this.getwenlist(); //获取文件下面所有资源
        this.getlei(3);
      }
    },
    getclearhead() {
      this.headlist = [
        {
          fileName: this.wenitem.name,
          parentId: 0,
          projectId: 0,
          ID: 0,
        },
      ];
      localStorage.setItem('headlist', JSON.stringify(this.headlist));
    },

    getpaishelist() {
      SystemMangeAPI.ListByResource({
        projectId: this.popitem.ID,
      }).then(res => {
        if (res.code == 0) {
          this.cjwlist = res.data;
        }
      });
    },

    getqiepian(item) {
      if (item.cutStatus == 1) {
        //终止
        SystemMangeAPI.endCut({
          resourceId: item.ID,
        }).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.lang26'),
            });
            this.getpaishelist();
          }
        });
      } else {
        //开始
        SystemMangeAPI.startCut({
          resourceId: item.ID,
        }).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.lang26'),
            });
            this.getpaishelist();
          }
        });
      }
    },

    getRecording(item) {
      console.log('aa:' + item.cutStatus);
      if (item.recordingStatus == 1) {
        //终止
        SystemMangeAPI.endRecording({
          resourceId: item.ID,
        }).then(res => {
          console.log(res);
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.lang26'),
            });
            this.getpaishelist();
          }
        });
      } else {
        //开始
        SystemMangeAPI.startRecording({
          resourceId: item.ID,
        }).then(res => {
          console.log(res);
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.lang26'),
            });
            this.getpaishelist();
          }
        });
      }
    },

    cjiwei(e) {
      this.cjwtype = e;
      this.jiweidialogVisible = true;
    },
    cjiweiedit(item, e) {
      this.cjwtype = e;
      this.jiweidialogVisible = true;
      this.jipopid = item.ID;
      this.jiwei = {
        name: item.name,
      };
    },
    getaddziyuan(e) {
      this.zitype = 'add';
      this.zipop = e;
      this.paishedialogVisible = true;
    },
    getgengxin(item, e) {
      this.zitype = 'edit';
      this.zipop = e;
      this.paishedialogVisible = true;
      this.popid = item.ID;
      this.imageUrl2 = item.headImg;
      console.log(this.ziform)
      this.ziform = {
        name: item.name,
        type: this.zipop == 1 ? 'LL' : 'ZY',
        isScreen: item.isScreen == 'Y' ? true : false,
      };
      console.log(this.ziform)
    },

    getjiankan(item) {
      this.$router.push('/PCVideo?id=' + item.projectId);
    },
    getlei(e) {
      this.islei = e;
      localStorage.setItem('islei', this.islei);
    },
    getjipei(item, type) {
      //机位配置
      this.spyitem = item;
      this.spyfrom.chrResourceId = item.ID;
      this.spytype = type;
      this.spydialogVisible = true;
    },
    getjibtn() {
      if (this.cjwtype == 'add') {
        //新增项目
        if (!this.jiwei.name) {
          this.$message({
            type: 'error',
            message: this.$t('message.lang27'),
          });
          return;
        }
        let parms = Object.assign({}, this.jiwei);
        parms.projectId = this.popitem.ID;
        parms.headImg = this.imageUrl2
        SystemMangeAPI.CreateResource(parms).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.lang26'),
            });
            this.getclear(2);
            this.getpaishelist(); //获取项目所有资源
          }
        });
      } else if (this.cjwtype == 'edit') {
        //编辑
        if (!this.jiwei.name) {
          this.$message({
            type: 'error',
            message: this.$t('message.lang27'),
          });
          return;
        }
        let parms = Object.assign({}, this.jiwei);
        parms.ID = this.jipopid;
        parms.HEAD_IMG = this.imageUrl2
        SystemMangeAPI.UpdateResource(parms).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.lang26'),
            });
            this.getclear(2);
            this.getpaishelist(); //获取项目所有资源
          }
        });
      }
    },
    beforeUpload(file) {
      let selectedFile = this.selectedFile || [];
      selectedFile.push(file);
      this.selectedFile = selectedFile;
      return false; // 阻止自动上传
    },
    beforeUploadwen(file) {
      let selectedFilewen = this.selectedFilewen || [];
      selectedFilewen.push(file);
      this.selectedFilewen = selectedFilewen;
      return false; // 阻止自动上传
    },
    handleFileChange(file, fileList) {
      // 处理文件选择变化，更新文件列表
      // this.fileList = fileList;
    },
    handleUpload() {
      if (this.activeName == 'second') {
        if (this.selectedFile) {
          const loading = Loading.service({
            lock: true,
            text: this.$t('message.lang28'),
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          });
          const formData = new FormData();
          // formData.append('files', this.selectedFile);
          this.selectedFile.forEach(file => {
            formData.append('files', file); // 'files' 是后端接收文件的字段名，可根据实际情况修改
          });
          formData.append('resourceId', this.spyfrom.chrResourceId);
          SystemMangeAPI.UploadFiles(formData)
              .then(res => {
                // console.log(res)
                this.selectedFile = null;
                this.sucailist = res.data;
                loading.close();
              })
              .catch(error => {
                // 接口请求失败处理逻辑
                // console.error('请求失败：', error);
                // 关闭加载圈
                loading.close();
              });
        } else {
          this.$message({
            type: 'error',
            message: this.$t('message.lang29'),
          });
          // console.log('请先选择文件');
        }
      } else if (this.activeName == 'first') {
        // ziyuanCreate
        this.getjimingxiadd();
      }
    },

    getjimingxiadd() {
      if (this.spytype == 'add') {
        //新增项目
        if (!this.spyfrom.rtmpUrl) {
          this.$message({
            type: 'error',
            message: this.$t('message.lang30'),
          });
          return;
        }
        let parms = Object.assign({}, this.spyfrom);
        parms.cutTimes = Number(parms.cutTimes);
        SystemMangeAPI.ziyuanCreate(parms).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.lang26'),
            });
            this.getclear(3);
            this.getpaishelist(); //我的项目
          }
        });
      } else if (this.spytype == 'edit') {
        //编辑
        if (!this.spyfrom.rtmpUrl) {
          this.$message({
            type: 'error',
            message: this.$t('message.lang30'),
          });
          return;
        }
        let parms = Object.assign({}, this.ziform);
        parms.ID = this.popid;
        SystemMangeAPI.ziyuanUpdate(parms).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.lang26'),
            });
            this.getclear(3);
            this.getpaishelist(); //我的项目
          }
        });
      }
    },
    getaddwenjian() {
      this.ypantype = 'add';
      this.activeName = 'first';
      this.yunpanform.fileName = '';

      this.yunpandialogVisible = true;
    },
    chuangyunpan() {
      if (this.ypantype == 'add') {
        //新增项目
        if (this.yunpanName == 'first') {
          if (!this.yunpanform.fileName) {
            this.$message({
              type: 'error',
              message: this.$t('message.lang23'),
            });
            return;
          }
          let parms = Object.assign({}, this.yunpanform);
          SystemMangeAPI.CreateFolder(parms).then(res => {
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: this.$t('message.lang26'),
              });
              // this.getclear(4);
              this.yunpandialogVisible = false;
              this.yunpanform.fileName = '';
              this.getwenlist(); //我的云盘
            }
          });
        } else if (this.yunpanName == 'second') {
          if (this.selectedFilewen) {
            const loading = Loading.service({
              lock: true,
              text: this.$t('message.lang28'),
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)',
            });

            const formData = new FormData(); // 创建FormData对象来存储文件和额外的数据
            this.selectedFilewen.forEach(file => {
              formData.append('files', file); // 'files' 是后端接收文件的字段名，可根据实际情况修改
            });
            console.log(formData);
            formData.append('projectId', this.yunpanform.projectId);
            formData.append('parentId', this.yunpanform.parentId);
            SystemMangeAPI.yunpanUpload(formData)
                .then(res => {
                  this.selectedFilewen = null;
                  this.xmwenlist = res.data;
                  loading.close();
                  this.yunpandialogVisible = false;
                  this.yunpanform.fileName = '';
                  this.getwenlist(); //我的云盘
                })
                .catch(error => {
                  // 接口请求失败处理逻辑
                  console.error('请求失败：', error);
                  // 关闭加载圈
                  loading.close();
                });
          } else {
            this.$message({
              type: 'error',
              message: this.$t('message.lang29'),
            });
            console.log('请先选择文件');
          }
        }
      } else if (this.ypantype == 'edit') {
        //新增项目
        if (!this.yunpanform.fileName) {
          this.$message({
            type: 'error',
            message: this.$t('message.lang23'),
          });
          return;
        }
        let parms = {};
        parms.fileName = this.yunpanform.fileName;
        parms.ID = this.ypanpopid;
        parms.fileExt = ''; //文件扩展名
        parms.isShared = ''; //是否分享
        // let parms = Object.assign({}, this.yunpanform);
        SystemMangeAPI.UpdateFile(parms).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: this.$t('message.lang26'),
            });
            // this.getclear(4);
            this.yunpandialogVisible = false;
            this.yunpanform.fileName = '';
            this.getwenlist(); //我的云盘
          }
        });
      }
    },
    getwenlist() {
      //获取文件下面所有资源
      // console.log('982行parentId是'+this.yunpanform.parentId+'')
      SystemMangeAPI.ListFiles({
        projectId: this.wenitem.ID,
        parentId: this.yunpanform.parentId, //默认0
      }).then(res => {
        if (res.code == 0) {
          this.wenjianlist = res.data;
          localStorage.setItem('yunpanform', JSON.stringify(this.yunpanform));
        }
      });
    },
    getwenitem(item) {
      //点击项目本身
      if (item.fileType == 'F') {
        //下载或者预览 不下一级
        if (item.mimeType.includes('image')) {
          //图片
          this.tudialogVisible = true;
          this.imageUrl = item.filePath;
        } else if (item.mimeType.includes('video')) {
          //视频
          const videoUrl = item.filePath; // 请替换为实际的视频 URL
          const newWindow = window.open(videoUrl, '_blank');
          if (newWindow) {
            // 有些浏览器可能会拦截弹出窗口，这里可以做一些处理
            newWindow.focus();
          } else {
            this.$message({
              type: 'error',
              message: this.$t('message.lang31'),
            });
          }
        } else {
          //其他文件 提示下载
          this.$confirm(this.$t('message.lang32'), this.$t('message.prompt'), {
            confirmButtonText: this.$t('message.confirm'),
            cancelButtonText: this.$t('message.cancel'),
            type: 'warning',
          })
              .then(() => {
                const videoUrl = item.filePath; // 请替换为实际的视频 URL
                const newWindow = window.open(videoUrl, '_blank');
                if (newWindow) {
                  // 有些浏览器可能会拦截弹出窗口，这里可以做一些处理
                  newWindow.focus();
                } else {
                  this.$message({
                    type: 'error',
                    message: this.$t('message.lang31'),
                  });
                }
              })
              .catch(() => {
              });
        }
      } else {
        this.headlist.push(item);
        localStorage.setItem('headlist', JSON.stringify(this.headlist));
        this.yunpanform.parentId = item.ID;
        this.getwenlist();
      }
    },

    getheadyun(item, index) {
      //点击顶部切换)
      this.headlist = this.headlist.slice(0, index + 1);
      localStorage.setItem('headlist', JSON.stringify(this.headlist));
      // head 做缓存
      this.yunpanform.parentId = item.ID;
      this.getwenlist();
    },

    getdelwen(i, ind) {
      console.log(this.isShowDelete)
      // 确认删除
      this.$confirm(this.$t('message.noDelete2'), this.$t('message.prompt'), {
        confirmButtonText: this.$t('message.confirm'),
        cancelButtonText: this.$t('message.cancel'),
        type: 'warning',
      }).then(() => {
        SystemMangeAPI.DeleteFile({
          ID: i.ID,
        }).then(res => {
          if (res.code == 0) {
            // this.getwenlist()
            this.wenjianlist.splice(ind, 1);
          }
        });
      })
    },

    getgengwen(i, ind) {
      this.ypantype = 'edit';
      this.yunpanName = 'first';
      this.ypanpopid = i.ID;
      this.yunpanform.fileName = i.fileName;
      this.yunpandialogVisible = true;
    }
    ,
    getdown(i, ind) {
      if (i.mimeType.includes('image')) {
        //图片
        this.tudialogVisible = true;
        this.imageUrl = i.filePath;
      } else {
        //视频
        const videoUrl = i.filePath; // 请替换为实际的视频 URL
        const newWindow = window.open(videoUrl, '_blank');
        if (newWindow) {
          // 有些浏览器可能会拦截弹出窗口，这里可以做一些处理
          newWindow.focus();
        } else {
          this.$message({
            type: 'error',
            message: this.$t('message.lang31'),
          });
        }
      }
    }
    ,
    getnodetu(item) {
      let status = true;
      if (item.mimeType.includes('image')) {
        status = false;
      }
      return status;
    }
    ,
  },
}
;
</script>

<style scoped>
.web-container {
}

.page-containerstwo {
  height: calc(100vh - 54px);
  width: 100%;
  display: flex;
  flex-direction: row;
  background: #0a0b0d;
}

.rightview {
  flex: 1;
  height: 100%;
  position: relative;
  display: flex;
}

.center-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.center-col {
  display: flex;
  flex-direction: column;
}

.newleft {
  height: 100%;
  /* width: 300px; */
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  transition: width 0.4s ease;
}

.leftview {
  height: 100%;
  background-color: #1c1d24;
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  overflow-y: scroll;
}

.pone {
  height: 75px;
  background: #30323b;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 23px;
  width: 100%;
  cursor: pointer;
  position: relative;
}

.pzhan {
  height: 60px;
  background: #23242a;
  padding: 0 27px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.pzhan:hover {
  background: #30323b;
}

.isclass {
  background: #30323b;
}

.dian {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #0199e8;
  border-radius: 50%;
  border: 1px solid #c2c2c2;
  margin-right: 10px;
}

.icon_gd {
  width: 18px;
  height: 18px;
  margin-left: auto;
  cursor: pointer;
}

.zhanname {
  max-width: 85%;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
}

.icon_ps {
  width: 24px;
  height: 24px;
  margin-right: 2px;
}

.txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.painame {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}

.rpai {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.icon_px {
  margin-left: 8px;
  width: 18px;
  height: 18px;
}

.rnav {
  width: 450px;
  margin: 0 30px;
}

.img_pt {
  width: 100%;
  height: 338px;
}

.navbot {
  padding: 23px 45px;
  background: #272830;
  border-radius: 0px 0px 15px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ptit {
  font-weight: 500;
  font-size: 18px;
  color: #eeeeee;
}

.pmiao {
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  display: block;
  text-align: center;
}

.chuanbtn {
  width: 225px;
  height: 50px;
  background: #0199e8;
  border-radius: 8px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}

.ritems {
  display: flex;
  flex-direction: row;
}

/* 拍摄弹窗样式开始 */
.popcj {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px;
  align-items: center;
}

.fang {
  color: #333;
  font-size: 14px;
  white-space: nowrap;
  display: inline-block;
  margin-right: 5px;
}

.popright {
  display: flex;
  margin-left: auto;
  flex-direction: row;
}

.huishe {
  color: #409eff;
  cursor: pointer;
}

.chamiao {
  color: #666;
  font-size: 13px;
  font-weight: normal;
  display: block;
  margin-bottom: 10px;
}

.chams {
  color: #333;
  font-size: 14px;
  font-weight: normal;
  display: block;
  margin-bottom: 12px;
}

.qitem {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12px;
}

.qitem:last-child {
  margin-bottom: 0;
}

.quan {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #666;
  margin-right: 6px;
}

.pyi {
  position: relative;
  margin-left: 6px;
  top: 1px;
}

.chuan {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 50px;
}

.chuanleft {
  width: 46%;
  display: flex;
  flex-direction: column;
}

.chuanleft .el-upload-dragger {
  width: 100%;
}

/* 拍摄样式结束 */

.xmwj {
  height: 36px;
  background: #1c1d24;
  padding: 0 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: 1px solid #30323b;
  border-bottom: 1px solid #30323b;
}

.xname {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}

.tiji {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  display: block;
  margin: 10px 20px;
}

.shu {
  width: 1px;
  height: 14px;
  background: #9094a6;
  display: inline-block;
  margin: 0 14px;
}

.hui {
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}

.xmright {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}

.icon_yq {
  width: 23px;
  height: 23px;
  margin-right: 8px;
}

.icon_zk_zhan {
  width: 18px;
  height: 18px;
  margin-left: 20px;
}

.ren {
  display: flex;
  flex-direction: row;
}

.renitems {
  /* width: 22px;
  height: 22px; */
  background: rgba(115, 48, 255, 1);
  /* background: #25262E; */
  border-radius: 50%;
  border: 1px solid #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  min-width: 22px;
  padding: 2px 4px;
  position: relative;
  margin-left: -4px;
}

.schaun {
  width: 105px;
  height: 27px;
  background: #0199e8;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  margin-left: 40px;
}

.wenview {
  display: flex;
  flex-direction: column;
  padding: 20px 30px;
  overflow-y: scroll;
  height: 100%;
}

.wenitems {
  display: flex;
  flex-direction: column;
}

.wenhead {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

.wenname {
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}

.sjiao {
  width: 15px;
  height: 10px;
  transform: rotate(180deg);
  margin-left: 5px;
}

.wens {
  /* width: 133px;
  height: 114px; */
  position: relative;
  max-width: 180px;
  margin: 0 30px 30px 0;
  /* padding: 20px; */
  cursor: pointer;
}

.img_bj {
  position: absolute;
  width: 100%;
  height: 100%;
}

.wjhead {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 23px 10px 12px;
}

.wjleft {
  width: 65px;
  height: 55px;
  /* background: #1C1D24; */
  /* border-radius: 5px; */
  /* border: 1px solid #30323B; */
  position: relative;
}

.img_wjs {
  position: absolute;
  width: 100%;
  height: 100%;
}

.itemswj {
  position: relative;
  width: 100%;
  height: 100%;
  /* padding: 23px 10px 8px; */
}

.wenbot {
  /* background: #272830; */
  border-radius: 0px 0px 5px 5px;
  border-top: 1px solid #30323b;
  /* padding: 8px; */
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 3px 3px 0;
  padding: 8px;
}

.icon_gds {
  margin-left: auto;
  width: 14px;
  height: 14px;
}

.botleft {
  display: flex;
  flex-direction: column;
}

.img_sc {
  width: 36px;
  height: 28px;
  margin-left: 13px;
}

.botname {
  font-weight: 300;
  font-size: 10px;
  color: #ffffff;
}

.bottime {
  font-weight: 300;
  font-size: 10px;
  color: #9094a6;
  display: block;
  margin-top: 3px;
}

.wenjjia {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.paisheitem {
  background: rgba(28, 29, 36, 1);
  border-radius: 5px;
  padding: 11px 9px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.sheleft {
  width: 90px;
  height: 51px;
  position: relative;
}

.tuimg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.good {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding: 2px 8px;
  position: absolute;
  margin: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.xing {
  width: 5px;
  height: 5px;
  background: #0199e8;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.goodname {
  font-weight: 400;
  font-size: 11px;
  color: #ffffff;
}

.sheright {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  width: 67%;
  padding-left: 10px;
  padding-top: 5px;
}

.shename {
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
}

.shiview {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8px;
}

.icon_sj {
  width: 11px;
  height: 11px;
  margin-right: 5px;
}

.times {
  font-weight: 400;
  font-size: 12px;
  color: #cccccc;
  line-height: 13px;
}

.qies {
  width: 15px;
  height: 56px;
  cursor: pointer;
  position: absolute;
  right: -15px;
  top: 45%;
  z-index: 100;
}

.qiesright {
  width: 15px;
  height: 56px;
  cursor: pointer;
  position: absolute;
  left: -15px;
  top: 45%;
  z-index: 100;
}

.rone {
  padding: 20px;
}

.pfen {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}

.plname {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  display: block;
  margin-bottom: 14px;
}

.pf {
  background: #272830;
  border-radius: 5px;
  border: 1px solid #30323b;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
}

.fens {
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}

.fshu {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}

.xings {
  width: 24px;
  height: 24px;
  margin-left: 4px;
}

.cjitems {
  display: flex;
  flex-direction: row;
}

.cjiitems {
  width: 30%;
  height: 61px;
  background: #272830;
  border-radius: 5px;
  border: 1px solid #30323b;
  position: relative;
  margin-right: 3%;
}

.heng {
  width: 100%;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px 5px 0 0;
  color: rgba(144, 148, 166, 1);
}

.cjian {
  position: relative;
  background: #1c1d24;
  border-radius: 0px 0px 5px 5px;
  border: 1px solid #30323b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}

.tanfu {
  position: absolute;
  height: 300px;
  width: 300px;
  background-color: #fff;
}

.chuview {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}

.cbiaoti {
  color: #666;
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
  margin-right: 5px;
}

.jiview {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.jiitems {
  background-color: rgba(28, 29, 36, 1);
  width: 48%;
  /* padding: 20px; */
  border-radius: 10px;
  margin: 0 2% 2% 0;
}

.wenviewtwo {
  display: flex;
  flex-direction: column;
  padding: 20px 20px;
  overflow-y: scroll;
  height: 100%;
}

.jihead {
  background-color: rgba(39, 40, 48, 1);
  padding: 10px 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 10px 10px 0 0;
}

.jbt {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  max-width: 90%;
  display: inline-block;
}

.jbtwjian {
  margin-left: auto;
  color: #666;
  font-size: 14px;
  font-weight: normal;
}

.jinav {
  display: flex;
  padding: 20px;
  flex-direction: row;
  align-items: center;
}

.wentu {
  width: 150px;
  height: 80px;
  border-radius: 8px;
}

.jinavleft {
  width: 75%;
}

.jinavright {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.chaview {
  display: flex;
  flex-direction: column;
}

.elitem {
  padding: 11px 12px;
  /* border-bottom: 1px solid #eee; */
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #333;
  font-size: 13px;
  font-weight: 400;
}

.elitem:hover {
  background-color: #0199e8;
  color: #fff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.chuanleft .el-upload-dragger {
  width: 100%;
}

.el-popover {
  padding: 0 0px;
}

.chuanleft .el-upload {
  width: 100%;
}

.rone .el-input__inner {
  background-color: #272830;
  border: 1px solid #272830;
  color: #fff;
}
</style>
